<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>job - TaskManager V2.0</title>
    <!-- local lib -->
    <!-- <script src="/lib/vue/vue.min.js"></script>
    <script src="/lib/axios/axios.min.js"></script>
    <link href="/lib/iview/styles/iview.css" rel="stylesheet">
    <script src="/lib/iview/iview.min.js"></script> -->
    <!-- CDN bootcdn -->
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <link href="https://cdn.bootcss.com/iview/2.11.0/styles/iview.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/iview/2.11.0/iview.min.js"></script>
    <!-- DIY -->
    <link href="/css/job.css" rel="stylesheet">
</head>
<body>
    <div id="body">
        <!-- 模块组件 -->
        <div>
            <!-- 新增组件 -->
            <modal style="width:600px;" v-model="addView" title="新增记录" @on-ok="insert(form)">
                <i-form :label-width="80">
                    <form-item label="作业名称">
                        <i-input v-model="form.jobName" placeholder="请输入作业名称..."></i-input>
                    </form-item>
                    <form-item label="选择任务">
                        <i-select v-model="form.taskId" placeholder="请选择隶属任务...">
                            <i-option v-for="task,k in taskList" :key="k" :value="task.id">{{task.taskName}}({{task.cron}})</i-option>
                        </i-select>
                    </form-item>
                    <form-item label="执行命令">
                        <i-input v-model="form.command" placeholder="请输入终端命令..." title="node.exe"></i-input>
                    </form-item>
                    <form-item label="命令参数">
                        <i-input v-model="form.params" placeholder="请输入json字符串数组..." :title="JSON.stringify('app.js,hello'.split(','))"></i-input>
                    </form-item>
                    <form-item label="备注说明">
                        <i-input v-model="form.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注说明..."></i-input>
                    </form-item>
                </i-form>
            </modal>
            <!-- 修改组件 -->
            <modal style="width:600px;" v-model="editView" title="修改记录" @on-ok="update(form)">
                <i-form :label-width="80">
                    <form-item label="作业名称">
                        <i-input v-model="form.jobName" placeholder="请输入作业名称..."></i-input>
                    </form-item>
                    <form-item label="选择任务">
                        <i-select v-model="form.taskId" placeholder="请选择隶属任务...">
                            <i-option v-for="task,k in taskList" :key="k" :value="task.id">{{task.taskName}}({{task.cron}})</i-option>
                        </i-select>
                    </form-item>
                    <form-item label="执行命令">
                        <i-input v-model="form.command" placeholder="请输入终端命令..." title="node.exe"></i-input>
                    </form-item>
                    <form-item label="命令参数">
                        <i-input v-model="form.params" placeholder="请输入json字符串数组..." :title="JSON.stringify('app.js,hello'.split(','))"></i-input>
                    </form-item>
                    <form-item label="备注说明">
                        <i-input v-model="form.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注说明..."></i-input>
                    </form-item>
                </i-form>
            </modal>
        </div>
        <!-- 列表 -->
        <layout>
            <i-header>
                <div class="layout-logo"></div>
                <div class="layout-nav">TaskManager V2.0</div>
            </i-header>
            <layout>
                <sider hide-trigger :style="{background: '#fff'}">
                    <i-menu active-name="1-2" theme="light" width="auto">
                        <a href="/view/task.html"><menu-item name="1-1">任务管理</menu-item></a>
                        <a href="/view/job.html"><menu-item name="1-2">作业管理</menu-item></a>
                        <a href="/view/log.html"><menu-item name="1-3">日志管理</menu-item></a>
                    </i-menu>
                </sider>
                <layout :style="{padding: '0 1rem'}">
                    <breadcrumb :style="{margin: '1rem 0'}">
                        <breadcrumb-item>主页</breadcrumb-item>
                        <breadcrumb-item>作业管理</breadcrumb-item>
                    </breadcrumb>
                    <i-content :style="{padding: '1rem',  background: '#fff'}">
                        <layout>
                            <i-header>
                                <i-button type="info" @click="add">新增</i-button>
                                <poptip confirm @on-ok="remove" title="您确认删除所选内容吗？" placement="right-start">
                                    <i-button type="warning">删除</i-button>
                                </poptip>
                            </i-header>
                        </layout>
                        <table style="width: 100%;" class="ivu-table ivu-table-wrapper">
                            <thead class="ivu-table-header">
                                <tr>
                                    <th class="ivu-table-column-center w40"><input type="checkbox" :checked="checkedAll" @change="checkAll()" class="ivu-checkbox"></th>
                                    <th>ID</th><th>作业名称</th><th>任务ID</th><th>命令</th><th>参数</th><th>备注</th>
                                    <th class="ivu-table-column-center w120">操作</th>
                                </tr>
                            </thead>
                            <tbody class="ivu-table-body">
                                <tr v-for="item,k in list" :key="k">
                                    <td class="ivu-table-column-center"><input type="checkbox" :value="item._id" :checked="checkedAll||!!item.checked" @change="onCheck(item)" class="ivu-checkbox"></td>
                                    <td>{{item.id}}</td><td>{{item.jobName}}</td><td>{{item.taskId}}</td><td>{{item.command}}</td><td>{{item.params}}</td><td>{{item.remark}}</td>
                                    <td class="ivu-table-column-center">
                                        <!-- <i-button type="success" size="small" @click="run(item)" :data-type="!!item.state?'stop':'run'">{{!!item.state?"停止":"运行"}}</i-button> -->
                                        <i-button size="small" @click="modify(item)" type="primary">修改</i-button>
                                        <poptip confirm transfer @on-ok="remove(item)" title="您确认删除这条内容吗？" placement="left">
                                            <i-button size="small" type="warning">删除</i-button>
                                        </poptip>
                                        <!-- <i-button type="warning" size="small" @click="runOne(item)">一次</i-button> -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <page :total="total" :page-size="pageSize" size="small" :page-size-opts="[5,10,15,20]" @on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer :style="{padding:'1rem 0'}"></page>
                    </i-content>
                    <i-footer>基于vue+iview框架技术实现</i-footer>
                </layout>
            </layout>
        </layout>
    </div>
    <script src="/js/job.js"></script>
</body>
</html>